<template>
    <div>
        <div id="mainM3" style="width: 100%;height:6.25rem;"></div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetFAPOfIAO } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    const 本周入库溯源件 = ref<any>('')
    const 本周入库非溯源件 = ref<any>('')
    const 本周入库配件总数 = ref<any>('')
    const weekArr = ref<any>([])
    RequestStatisticGetFAPOfIAO().then((res: any) => {
        res.resultObj.forEach((item: any) => {
            if (item.name == '本周入库溯源件') {
                本周入库溯源件.value = item.value
                weekArr.value.push(item)
            }
            if (item.name == '本周入库非溯源件') {
                本周入库非溯源件.value = item.value
            }

            本周入库配件总数.value = 本周入库溯源件.value + 本周入库非溯源件.value
        });
        weekArr.value.push({
            name: '本周入库配件总数',
            value: 本周入库配件总数.value
        })
        
        var chartDom = document.getElementById('mainM3');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            color: ['#135efc', '#e8f2ff'],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                        // fontSize:'40',
                    },
                    labelLine: {
                        show: false
                    },
                    data: weekArr.value
                }
            ]
        };
        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>